<template>
  <div id="app">
    <MineMap></MineMap>
    <MineTitle></MineTitle>
    <div class="charts-container">
      <div class="left-charts">
        <TotalMileAge class="chart-margin"></TotalMileAge>
        <CarTypeChart class="chart-margin"></CarTypeChart>
        <ExpandIfo class="chart-margin"></ExpandIfo>
        <OneDayActive></OneDayActive>
      </div>
      <div class="right-charts">
        <TotalOnline class="chart-margin"></TotalOnline>
        <ProRings class="chart-margin"></ProRings>
        <TopTen class="chart-margin"></TopTen>
        <CarOperate></CarOperate>
      </div>
    </div>
    <div class="tool-bar">
      <DropDown title="车辆类型" icon="car" :style="{'border-right':'none','border-radius':'4px 0 0 4px'}" >
        <SelectBox @result="makeCarTypeFilter"></SelectBox>
      </DropDown>
      <DropDown title="区域选择" icon="map" :style="{'border-radius':'0 4px 4px 0'}">
        <CityBox @changeCode="makePosition"></CityBox>
      </DropDown>
      <SearchCar></SearchCar>
    </div>

    <router-view/>
  </div>
</template>

<script>
  import MineMap from './components/Map/Map'
  import MineTitle from './components/View/Title'
  import DropDown from './components/View/DropDown'
  import SelectBox from './components/view/SelectBox'
  import CityBox from './components/view/CityBox'
  import SearchCar from './components/view/SearchCar'
  import TotalMileAge from './components/Charts/total-mileage'
  import TotalOnline from './components/Charts/total-online'
  import CarTypeChart from './components/Charts/car-type'
  import ExpandIfo from './components/Charts/expend-info'
  import ProRings from './components/Charts/proportion-rings'
  import TopTen from './components/Charts/top-ten'
  import OneDayActive from './components/Charts/oneday-active'
  import CarOperate from './components/Charts/car-operate'
  import {mapState,mapMutations,mapGetters} from 'vuex'

  export default {
    name: 'app',
    components: {
      MineMap,
      MineTitle,
      DropDown,
      SelectBox,
      CityBox,
      SearchCar,

      TotalMileAge,TotalOnline,CarTypeChart,ExpandIfo,ProRings,TopTen,
      OneDayActive,CarOperate
    },
    data() {
      return {
        isCityInputFocus:false
      }
    },
    methods: {
      ...mapMutations(['updateCarTypeFilter','updateAdminFilter']),
      makeCarTypeFilter(result){
        if(result.length===0) result = ['#'];
        let filter = ['in','cartype',...result];
        this.updateCarTypeFilter({filter});
      },
      ...mapMutations(['updatePosition']),
      makePosition(result){
        const {lon,lat,code} = result;
        let center = [+lon,+lat];
        this.updatePosition({center});

        // console.log(code);
        let filter = [];
        if(code === '000000'){
          filter = [];
        }else if(code.slice(2)==="0000"){
          filter = ['==','procode',code]
        }else{
          filter = ['==','citycode',code];
        }

        this.updateAdminFilter({filter})
      }

    }
  }
</script>

<style lang="scss">
  @import "./common/scss/reset";
  * {
    margin: 0;
    padding: 0;
  }

  html, body {
    width: 100%;
    height: 100%;
    font-family: "Microsoft YaHei UI", serif;
    box-sizing: border-box;
  }

  #app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100%;
    width: 100%;
    min-height:1080px;
  }

  .tool-bar {
    position: absolute;
    top: 10px;
    right: 10px;
    display:flex;
  }

  .charts-container{
    box-sizing:border-box;
    position:absolute;
    width:100%;
    top:120px;
  }
  .left-charts{
    position: absolute;
    top:0;
    left:20px;
  }
  .right-charts{
    position:absolute;
    top:0;
    right:20px;
  }
  .chart-margin{
    margin-bottom:20px;
  }

  @media (min-width:1900px) {
    .tool-bar {
      top: 20px;
      right: 20px;
    }
  }
</style>
